//css初始化
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;//规定宽度和高度是包含了内容和边框的
}
body{
  background: url("../images/bg.jpg") no-repeat top center;
  line-height: 1.15;//行高 单位是什么?数值本身就是一种单位宽度.除此之外还有ps和百分比
}
header{
  position: relative;//子绝父相
  height: 1.25rem;
  background:url("../images/head_bg.png") no-repeat;
  background-size: 100% 100%;
  h1{
    display: none;
    font-size: 0.475rem;//38px
    color: white;
    line-height: 1rem;
    text-align: center;
  }
  .showTime{
    position: absolute;
    right: 0.375rem;//30px
    top:0;//上移0个单位否则,就被h1挤到下一行去了
    line-height: 0.9375rem;//75px
    color: rgba(255,255,255,0.7);
    font-size: 0.25rem;//20px
  }
}

.mainbox{
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  height: 300px;
  //background-color: pink;
  padding: 0.125rem 0.125rem 0 0.125rem;
  .column{
    flex: 3;//据说是设置子元素的宽度比例分数,设置元素上下居中对齐有关系
    //&:nth-child(2){//这是css3的写法
    //  flex:5;//第二个子元素设置宽度是5份
    //}
  }
  .column:nth-child(2){//第二个子元素设置宽度是5份
    flex: 5;
  }
  .panel{
    position: relative;//子绝父相
    height: 3.875rem;//31px
    border: 1px solid rgba(25,186,139,0.17);//1px太细了,不用rem转换了.大的再去转换
    background:url("../images/line(1).png") rgba(255,255,255,0.03);//第四位是透明
    padding: 0 0.1875rem 0.5rem 0.1875rem;
    margin-bottom: 0.1875rem;
    &::before{//伪元素
      position: absolute;
      top:0;
      left: 0;
      width: 10px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      content: "";
    }
    &::after{
      position: absolute;
      top:0;
      right: 0;
      width: 10px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      content: "";
    }
    h2{
      height: 0.6rem;//48px
      color: white;
      text-align: center;
      line-height: 0.6rem;
      font-size: 0.25rem;
      font-weight: 400;//不加粗
    }
    .chart{
      height: 2.875rem;
      background-color: pink;
    }
    .panel-footer{
      position: absolute;
      bottom: 0;//定位到底下
      left:0;
      width: 100%;//父元素的宽度的100%
      &::before{//伪元素
        position: absolute;
        left: 0;
        bottom:0;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        content: "";
      }
      &::after{
        position: absolute;
        right: 0;
        bottom:0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}



















